<template>
  <!-- <PageWrapper contentFullHeight fixedHeight contentClass="main-box"> -->
  
  <a-card class="common-card" title="天然气和化学品成本及用量">
    <CommonDateSearch ref="searchRef" @search="handleSearch"></CommonDateSearch>
    <div class="chart-box">
      <div class="chart-box-item" v-for="item in typeList" :key="item.dictCode">
        <BarLine class="chart" :loading="item.loading" :chartData="item.chartData" :title="item.itemName" />
      </div>
    </div>
  </a-card>
  <!-- </PageWrapper> -->
</template>
<script setup>
import BarLine from '@/components/Charts/BarLine/index.vue'
import { getTotalLineData, getTypeLineData, getBarData } from '@/api/carbon/calc'
import { ref, onMounted, reactive } from 'vue'
import dayjs from 'dayjs'
import { PageWrapper } from '@/components/Page'
import CommonDateSearch from '../dailyUsage/CommonDateSearch.vue'
import Icon from '@/components/Icon/Icon.vue'
import { getTypeUsageCostChartData } from '@/api/common/chart'
import { getDictListByCode } from '@/api/sys/dict'

defineOptions({ name: 'Bindex' })

const searchRef = ref()
const searchInfo = reactive({})
const typeList = ref([])
const chartList = ref([])
const dictCode = 'air_conditioner2'
const titleObj = [

  {
    name: '天然气用量 单位：m³',
    type: '天然气',
  },
  {
    name: '化学品用量 单位：m³',
    type: '化学品',
  }
]

onMounted(async () => {

  await getTypeList()
  searchRef.value.handleSearch()
})
const handleSearch = (params) => {//搜索
  Object.assign(searchInfo, params)
  getChartData()
}
const getTypeList = async () => {//获取数据
  const res = await getDictListByCode(dictCode)
  typeList.value = res.map((item) => ({//解构组合
    ...item,
    loading: true,
    chartData: {
      xaxisList: [],
      yaxisList: [],
    },
  }))
  console.log(typeList.value, " typeList.value");

}
const getChartData = () => {
  typeList.value.forEach((item) => {
    item.loading = true
    getTypeUsageCostChartData({
      ...searchInfo,
      dictCode,
      itemName: item.itemName,
    })
      .then((res) => {

        item.chartData = {
          ...res,
          codeyAxisList: res.codeyAxisList.map(costItem => ({
            ...costItem,
            name: titleObj.find(titleItem => titleItem.name == item.itemName)?.type + '费用' || '未知类型费用'
          })),
          yaxisList: res.yaxisList.map(costItem => ({
            ...costItem,
            name: titleObj.find(titleItem => titleItem.name == item.itemName)?.type + '用量' || '未知类型用量'
          }))
        }

      })
      .finally(() => {
        item.loading = false
      })
  })
}
</script>
<style scoped lang="scss">
.common-card {
  flex: 1;
  display: flex;
  flex-direction: column;

  :deep(.ant-card-body) {
    display: flex;
    flex-wrap: wrap;
    padding: 4px;
    flex-direction: column;
    flex: 1;
    .chart-box{
      display: flex;
      flex-wrap: wrap;
      padding: 4px;
      flex: 1;
    }
    .chart-box-item {
      width: 50%;
      height: 100%;
      padding: 4px;
      overflow: hidden;
    }
  }
  :deep(.common-search){
    padding: 0px 8px;
  }
}
</style>
